<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/myDistributor" style="color: #409eff;">我的分销商</router-link></div>
          <div class="hei10"></div>
          
				<div class="title">我账户下的分销商</div>

				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>

				<div class="title">分销商列表</div>
        <div class="month">
          <el-date-picker v-model="month" type="month" placeholder="选择月"></el-date-picker>
        </div>
				<div class="con" v-loading="loading">
					<div class="list">
            <div class="th">发展人</div>
            <div class="th">客户经理</div>
            <div class="th">确认周期</div>
            <div class="th">订单数量</div>
            <div class="th">结算金额</div>
            <div class="th">佣金发放确认</div>
						<div class="th">结算状态</div>
						<div class="th">结算时间</div>
						<div class="th" style="flex:2">操作</div>
					</div>
					<div class="list" v-for="item in list" :key="item.child_shop_id">
            <div class="td">{{item.cm_name}}</div>
						<div class="td">{{item.name}}</div>
						<div class="td">{{item.mobile}}</div>
						<div class="td">{{item.address}}</div>
            <div class="td">{{item.cm_name}}</div>
            <div class="td">{{item.cm_name}}</div>
            <div class="td">{{item.cm_name}}</div>
            <div class="td">{{item.cm_name}}</div>
						<div class="td" style="flex:2">
							<el-button type="text">下载确认表</el-button>
							<el-button type="text">确认支出</el-button>
              <el-button type="text">结算</el-button>
						</div>
					</div>

					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<!-- <foot></foot> -->

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'myDistributork',
		data(){
			return{
				msg:"",
				id:"",

				loading:true,
				search:"",
				log:false,
				money:"",
				total:0,
				pagesize:20,
				page:1,
				list:"",
        shop_id:"",

        dialog:false,
        radio: '1',
        listk:"",
        month:""
			}
		},
		created() {
      var that = this

			this.getlist();

			//获取自己的id
			var user = JSON.parse(localStorage.getItem('USER'));
			this.id = user.id
      axios.get('/api/gth/user/shop')
          .then(response => {
              if(response.data.msg.code == 0){
                  this.shop_id = response.data.data.shop_id
              }else{
                  if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                  that.$message.error(response.data.msg.info);
              }
          })
		},
		methods:{

			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},
			//跳转编辑佣金
			fixmoney:function(id){
				this.$router.push({
					path: '/editMoney',
					query: { id: id }
				})
			},
			//跳转查看订单
			seeorder:function(id){
				this.$router.push({
					path: '/order_question/orderOther',
					query: { id: id }
				})
			},
            seeshop:function(id){
				this.$router.push({
					path: '/myDistributorshop',
					query: { id: id }
				})
			},
			//获取分销商
			getlist:function(){
        this.search = this.search.trim()
				var that = this;
				axios.get('/api/gth/partner/list?page='+this.page+'&page_size='+this.pagesize)
					.then(response => {
						if(response.data.msg.code == 0){
							that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//复制
			copy:function(){
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', window.location.host+'/#/register?supplier_id='+this.shop_id);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message({
					  message: '复制成功',
					  type: 'success'
					});
				}
				document.body.removeChild(input);
			},
			//搜索
			searchgo:function(){
                this.page = 1
				this.loading = true
				this.getlist()
			},
			loggo:function(){

			}
		}

	}
</script>

<style lang="scss" scoped>
	.index{
        .con{ margin-top: 20px;}
        .month{ text-align: right; margin: 20px;}
				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{ display: flex; justify-content: space-between; padding: 20px 30px; text-align: right; position: relative;
					.input-with-select{ width: 280px;}
					.el-button{  padding: 10px 20px;}
				}
        .el-input__icon{line-height: 36px;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						.el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}

					}
          .th1{ flex-basis: 50px; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
          .td1{ flex-basis: 50px;  font-size: 14px; border-right:1px #EAEAEA solid;  }

				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;
						span{ color: #B1B1B1; font-size: 14px; margin-left: 20px}
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}

	}
</style>
